<template>
	<view v-if="row" class="address-card shadow border-radius-sm">
		<view class="top">
			<view class="top-t">
				<text class="name">{{row.name}}</text>
				<text class="phone">{{row.phone}}</text>
			</view>
			<view class="top-b">
				<text>收货地址：{{`${row.province}${row.city}${row.district}${row.address || ''}`}}</text>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-l" @click="handleSetDefault">
				<radio color="#3B73FF" :checked="row.def" />
				<text style="vertical-align: middle;">设为默认地址</text>
			</view>
			<view class="bottom-r">
				<view class="edit" @click="handleEdit">
					<uni-icons type="compose"></uni-icons>
					<text>编辑</text>
				</view>
				<view class="delete" @click="handleDelete">
					<uni-icons type="trash"></uni-icons>
					<text>删除</text>
				</view>
				<uni-popup ref="delDialog" type="dialog">
					<uni-popup-dialog type="warn" content="确定要删除当前地址吗？" @confirm="handleConfirmDelete" @close="handleClose">
						<!-- <uni-popup-message type="warn" message="成功消息"></uni-popup-message> -->
					</uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	// import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			'uni-popup': uniPopup,
			// 'uni-popup-message': uniPopupMessage,
			'uni-popup-dialog': uniPopupDialog
		},
		props: {
			row: {
				type: Object,
				default: () => {
					return null
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 设为默认地址
			handleSetDefault() {
				this.$emit('change-address', this.row)
			},
			// 编辑地址信息
			handleEdit() {
				if(this.row && this.row.id) {
					uni.navigateTo({
						url: `/pages/address/create/create?id=${this.row.id}`
					})
				} else {
					uni.showToast({
						title: '获取地址数据失败',
						icon:'none'
					})
				}
			},
			// 删除地址
			handleDelete() {
				this.$refs.delDialog.open()
			},
			// 确认删除
			handleConfirmDelete() {
				this.$emit('delete', this.row)
				this.$refs.delDialog.close()
			},
			// 取消删除
			handleClose() {
				this.$refs.delDialog.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-card {
		background: $white;

		.top {
			padding: 20rpx;
			border-bottom: 1px solid $uni-border-color;

			.top-t {
				padding-bottom: 20rpx;
			}

			.name,
			.phone {
				display: inline-block;
				color: $uni-color-subtitle;
				font-size: 24rpx;
			}

			.phone {
				margin-left: 20rpx;
			}

			.top-b {
				color: $uni-color-subtitle;
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			color: $uni-color-subtitle;
			padding: 20rpx;

			.bottom-l,
			.bottom-r {
				flex: 1;
			}

			.bottom-r {
				text-align: right;

				.edit,
				.delete {
					display: inline-block;
				}

				.delete {
					margin-left: 40rpx;
				}
			}
		}
	}
</style>
